import { stationControllerGetStation as getDetail } from '@/services/ess/station';
import React, { useEffect, useRef, useState } from 'react';
import { useModel } from 'umi';
import ArchivesTable from './components/ArchivesTable';
import BaseInfo from './components/BaseInfo';

const SiteInfo: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const id = initialState?.stationId;
  const [detailInfo, setDetailInfo] = useState<API.StationInfo | null>(null);
  const archivesTableRef = useRef(null);

  useEffect(() => {
    if (id) {
      getDetail({ id }).then((res) => {
        if (res?.data) {
          setDetailInfo(res.data);
        } else {
          setDetailInfo(null);
        }
      });
    }
  }, [id]);

  return (
    <div>
      <BaseInfo detailInfo={detailInfo} />
      <div style={{ marginTop: 20 }}>
        <ArchivesTable id={id} ref={archivesTableRef} />
      </div>
    </div>
  );
};

export default SiteInfo;
